<template>
    <div>
        <Header title="我的"></Header>
        <div class="user-profile-container">
    <div class="user-profile">
      <div class="avatar-section">
        <img src="https://txkimg.dayunfangche.com/uploads/allimg/2023030412/1pzsquqzhpn.jpg" alt="" class="avatar">
      </div>
      <div class="info-section">
        <p class="nickname">昵称：222</p>
        <p class="signature">个性签名：授人与鱼不如授人与鱼</p>
      </div>
    </div>
  </div>
  <ul class="function-list">
    <li class="function-item" @click="goto('/order')">
      <p>我的订单</p>
      <span class="arrow"></span>
    </li>
    <li class="function-item" @click="goto('/address')">
      <p>地址管理</p>
      <span class="arrow"></span>
    </li>
    <li class="function-item" @click="goto('/userInfoEdit')">
      <p>账号管理</p>
      <span class="arrow"></span>
    </li>
  </ul>
    </div>
    <Footer />
</template>



<script setup lang="ts"> 
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

function goto(to) {
  router.push(to)
}
</script>



<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f4f4f4;
}

.user-profile-container {
  margin: 5px;
}

.user-profile {
  background: linear-gradient(to right, #ffc107, #8bc34a);
  border-radius: 8px;
  display: flex;
}

.avatar-section {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.info-section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.nickname,
.signature {
  color: white;
  margin-bottom: 5px;
}

.function-list {
  list-style: none;
  margin-top: 10px;
}

.function-item {
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}

.function-item a {
  color: #333;
  text-decoration: none;
}

.arrow {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #999;
}
</style>